<template>
  <div class="shop-list">
    <div class="shop-item" v-for="item in shopList" :key="item.id">
      <router-link :to="'/shop/' + item.id">
        <div class="item-shop">
          <div class="img-box">
            <img :src="item.url" alt="" />
          </div>
          <div class="shop-info">
            <p class="name">{{ item.name }}</p>
            <p class="point">评分：{{ item.point }}</p>
          </div>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script setup lang="ts">
import { listShops } from "../interface";

//获取商店列表
const shopList = listShops();
</script>

<style scoped>
.shop-list {
  padding: 20px 10px;
}
.shop-item {
  box-shadow: 0 0 5px #ccc;
  margin-bottom: 10px;
  padding: 10px;
}
.img-box {
  overflow: hidden;
}
.img-box img {
  width: 100%;
  transition: all 0.5s;
}
.img-box img:hover {
  transform: scale(1.2);
}
.shop-info {
  display: flex;
  justify-content: space-between;
}
.shop-info p {
  margin: 0;
}
.shop-info .name {
  font-size: 20px;
  font-weight: 700;
}

.shop-info .point {
  color: #666;
}
</style>